;(function(){
    var data = [220, 182, 191, 234, 290, 120, 65, 444];
    var barWidth = 20;
    var maxNum = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
            maxNum = data[i];
        }
    }
    // 创建echarts实例
    let myChart = echarts.init(document.querySelector('.main .column:nth-of-type(1) .box'))
    // 定义配置（指定图表的配置项和数据）
    let option = {
        title: {
            text: '柱状图',
            // subtext: '标题样式'
          },
          backgroundColor: 'transparent',
          grid: {
              top: '10%',
              left: '20%',
              right: '10%',
              bottom: '0%',
          },
          xAxis: {
              show: false,
          },
          yAxis: {
              data: data.map((item, index) => `data ${index}`),
              splitLine: {
                  show: false,
              },
              axisLabel: {
                  textStyle: { fontSize: '80%', color: '#02afff' },
              },
              axisLine: {
                  show: false,
              },
              axisTick: false,
          },
          series: [
              {
                  type: 'bar',
                  barWidth: barWidth,
                  zlevel: 2,
                  data: data.map(function (item) {
                      return {
                          value: item,
                          maxNum: maxNum,
                      };
                  }),
                  label: {
                      show: true,
                      position: 'inside',
                      // distance: 80,
                      align: 'center',
                      formatter: function (params) {
                          // return params.data.realValue;
                          var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
                          return percent;
                      },
                      color: '#fff',
                      fontSize: 12,
                  },
                  itemStyle: {
                      borderRadius: 10,
                      color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                          { offset: 0, color: '#395CFE' },
                          { offset: 1, color: '#2EC7CF' },
                      ]),
                  },
              },
              {
                  type: 'bar',
                  barWidth: barWidth,
                  barGap: '-100%',
                  data: data.map(function (item) {
                      return {
                          realValue: item,
                          value: maxNum,
                      };
                  }),
                //   label: {
                    //   show: true,
                    //   position: 'right',
                    //   distance: 80,
                    //   align: 'right',
                    //   formatter: function (params) {
                    //       return params.data.realValue + ' 件';
                    //   },
                    //   color: '#02afff',
                    //   fontSize: 18,
                //   },
                  itemStyle: {
                      borderRadius: 10,
                      color: 'rgba(3,169,244, 0.5)',
                  },
              },
          ],
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option)
    window.addEventListener("resize",() => {
        myChart.resize()
    })
// ...
})()